<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<h2 id="edit-processor-header" mat-dialog-title>
    <div class="flex justify-between items-center">
        <div class="flex items-baseline">
            <div class="mr-2">
                {{ readonly ? 'Processor Details' : 'Edit Processor' }}
            </div>
            |
            <div class="ml-2 text-base">
                {{ formatType() }}
            </div>
        </div>
        <div class="flex">
            @if (hasBulletins()) {
                <div class="w-[48px]">
                    <div
                        nifiTooltip
                        [delayClose]="true"
                        [tooltipComponentType]="BulletinsTip"
                        [tooltipInputData]="getBulletinsTipData()"
                        [position]="getBulletinTooltipPosition()"
                        [ngClass]="getMostSevereBulletinLevel()"
                        class="absolute top-0 right-0 text-3xl h-14 w-14 bulletins has-bulletins flex justify-center items-center">
                        <i class="fa fa-sticky-note-o"></i>
                    </div>
                </div>
            }
        </div>
    </div>
</h2>
<form class="processor-edit-form" [formGroup]="editProcessorForm">
    <context-error-banner [context]="ErrorContextKey.PROCESSOR"></context-error-banner>
    <mat-tab-group [(selectedIndex)]="selectedIndex" (selectedIndexChange)="tabChanged($event)">
        <mat-tab label="Settings">
            <mat-dialog-content>
                <div class="dialog-tab-content flex gap-x-4">
                    <div class="w-full">
                        <div>
                            <mat-form-field>
                                <mat-label>Name</mat-label>
                                <input matInput formControlName="name" type="text" [readonly]="readonly" />
                            </mat-form-field>
                        </div>
                        <div class="flex flex-col mb-5">
                            <div>Id</div>
                            <div [copy]="request.entity.id" class="tertiary-color font-medium">
                                {{ request.entity.id }}
                            </div>
                        </div>
                        <div class="flex flex-col mb-5">
                            <div>Type</div>
                            <div class="tertiary-color font-medium">
                                {{ formatType() }}
                            </div>
                        </div>
                        <div class="flex flex-col mb-6">
                            <div>Bundle</div>
                            <div class="tertiary-color font-medium">
                                {{ formatBundle() }}
                            </div>
                        </div>
                        <div class="flex gap-x-4">
                            <div class="w-full">
                                <mat-form-field>
                                    <mat-label>
                                        Penalty Duration
                                        <i
                                            class="fa fa-info-circle"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="The amount of time used when this processor penalizes a FlowFile."></i>
                                    </mat-label>
                                    <input
                                        matInput
                                        formControlName="penaltyDuration"
                                        type="text"
                                        [readonly]="readonly" />
                                </mat-form-field>
                            </div>
                            <div class="w-full">
                                <mat-form-field>
                                    <mat-label>
                                        Yield Duration
                                        <i
                                            class="fa fa-info-circle"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="When a processor yields, it will not be scheduled again until this amount of time elapses."></i>
                                    </mat-label>
                                    <input matInput formControlName="yieldDuration" type="text" [readonly]="readonly" />
                                </mat-form-field>
                            </div>
                        </div>
                        <div>
                            <mat-form-field>
                                <mat-label>
                                    Bulletin Level
                                    <i
                                        class="fa fa-info-circle"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="The level at which this processor will generate bulletins."></i>
                                </mat-label>
                                <mat-select formControlName="bulletinLevel">
                                    @for (option of bulletinLevels; track option) {
                                        <mat-option [value]="option.value" [disabled]="readonly">
                                            {{ option.text }}
                                        </mat-option>
                                    }
                                </mat-select>
                            </mat-form-field>
                        </div>
                    </div>
                    <div class="w-full"></div>
                </div>
            </mat-dialog-content>
        </mat-tab>
        <mat-tab label="Scheduling">
            <mat-dialog-content>
                <div class="dialog-tab-content flex gap-x-4">
                    <div class="w-full">
                        <div>
                            <mat-form-field>
                                <mat-label>
                                    Scheduling Strategy
                                    <i
                                        class="fa fa-info-circle"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="The strategy used to schedule this processor."></i>
                                </mat-label>
                                <mat-select
                                    formControlName="schedulingStrategy"
                                    (selectionChange)="schedulingStrategyChanged($event.value)">
                                    @for (option of schedulingStrategies; track option) {
                                        <mat-option
                                            [value]="option.value"
                                            [disabled]="readonly"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            [tooltipInputData]="option.description"
                                            [delayClose]="false">
                                            {{ option.text }}
                                        </mat-option>
                                    }
                                </mat-select>
                            </mat-form-field>
                        </div>
                        <div class="flex gap-x-4">
                            <div class="w-1/2">
                                <mat-form-field>
                                    <mat-label>
                                        Concurrent Tasks
                                        <i
                                            class="fa fa-info-circle"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="The number of tasks that should be concurrently scheduled for this processor. Must be an integer greater than 0."></i>
                                    </mat-label>
                                    <input
                                        matInput
                                        formControlName="concurrentTasks"
                                        (change)="concurrentTasksChanged()"
                                        name="concurrentTasks"
                                        type="number"
                                        min="1"
                                        [readonly]="readonly" />
                                </mat-form-field>
                            </div>
                            <div class="w-1/2">
                                <mat-form-field>
                                    <mat-label>
                                        Run Schedule
                                        <i
                                            class="fa fa-info-circle"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            tooltipInputData="The minimum number of seconds that should elapse between task executions."></i>
                                    </mat-label>
                                    <input
                                        matInput
                                        formControlName="schedulingPeriod"
                                        (change)="schedulingPeriodChanged()"
                                        type="text"
                                        [readonly]="readonly" />
                                </mat-form-field>
                            </div>
                        </div>
                        <div>
                            <mat-form-field>
                                <mat-label>
                                    Execution
                                    <i
                                        class="fa fa-info-circle"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="The node(s) that this processor will be scheduled to run on."></i>
                                </mat-label>
                                <mat-select formControlName="executionNode">
                                    @for (option of executionStrategies; track option) {
                                        <mat-option
                                            [disabled]="executionStrategyDisabled(option) || readonly"
                                            [value]="option.value"
                                            nifiTooltip
                                            [tooltipComponentType]="TextTip"
                                            [tooltipInputData]="option.description"
                                            [delayClose]="false">
                                            {{ option.text }}
                                        </mat-option>
                                    }
                                </mat-select>
                            </mat-form-field>
                        </div>
                    </div>
                    <div class="w-full">
                        @if (supportsBatching()) {
                            <div class="flex flex-col mb-5">
                                <div>
                                    Run Duration
                                    <i
                                        class="fa fa-info-circle primary-color"
                                        nifiTooltip
                                        [tooltipComponentType]="TextTip"
                                        tooltipInputData="When scheduled to run, the processor will continue running for up to this duration. A run duration of 0ms will execute once when scheduled."></i>
                                </div>
                                <run-duration-slider
                                    formControlName="runDuration"
                                    (change)="runDurationChanged()"></run-duration-slider>
                                @if (shouldShowWarning()) {
                                    <div class="w-80">
                                        <div class="fa fa-warning has-errors caution-color"></div>
                                        Source Processors with a run duration greater than 0ms and no incoming
                                        connections could lose data when NiFi is shutdown.
                                    </div>
                                }
                            </div>
                        }
                    </div>
                </div>
            </mat-dialog-content>
        </mat-tab>
        <mat-tab label="Properties">
            <mat-dialog-content>
                <div class="dialog-tab-content flex gap-x-3">
                    <property-table
                        class="w-2/3"
                        formControlName="properties"
                        [createNewProperty]="createNewProperty"
                        [createNewService]="createNewService"
                        [goToParameter]="goToParameter"
                        [parameterContext]="parameterContext"
                        [convertToParameter]="convertToParameter"
                        [goToService]="goToService"
                        [propertyHistory]="request.history"
                        [supportsSensitiveDynamicProperties]="
                            request.entity.component.supportsSensitiveDynamicProperties
                        "></property-table>
                    <property-verification
                        class="w-1/3"
                        [disabled]="readonly"
                        [isVerifying]="(propertyVerificationStatus$ | async) === 'loading'"
                        [results]="propertyVerificationResults$ | async"
                        (verify)="verifyClicked(request.entity)"></property-verification>
                </div>
            </mat-dialog-content>
        </mat-tab>
        <mat-tab label="Relationships">
            <mat-dialog-content>
                <div class="dialog-tab-content">
                    @if (request.entity.component.relationships.length > 0) {
                        <relationship-settings formControlName="relationshipConfiguration"></relationship-settings>
                    } @else {
                        <div class="unset neutral-color">This processor has no relationships.</div>
                    }
                </div>
            </mat-dialog-content>
        </mat-tab>
        <mat-tab label="Comments">
            <mat-dialog-content>
                <div class="dialog-tab-content">
                    <mat-form-field>
                        <mat-label>Comments</mat-label>
                        <textarea
                            matInput
                            formControlName="comments"
                            type="text"
                            rows="10"
                            [readonly]="readonly"></textarea>
                    </mat-form-field>
                </div>
            </mat-dialog-content>
        </mat-tab>
    </mat-tab-group>
    @if ({ value: (saving$ | async)! }; as saving) {
        <mat-dialog-actions align="start">
            <div class="flex w-full justify-between items-center">
                <div>
                    @if (isStoppable()) {
                        <button
                            type="button"
                            [disabled]="!canOperate()"
                            mat-stroked-button
                            [matMenuTriggerFor]="operateMenu">
                            <div class="flex items-center">
                                <i class="mr-2 success-color-default fa fa-play"></i>Running<i
                                    class="ml-2 -mt-1 fa fa-sort-desc"></i>
                            </div>
                        </button>
                    } @else if (isRunnable()) {
                        <button
                            type="button"
                            [disabled]="!canOperate()"
                            mat-stroked-button
                            [matMenuTriggerFor]="operateMenu">
                            <div class="flex items-center">
                                <i class="mr-2 error-color-variant fa fa-stop"></i>Stopped<i
                                    class="ml-2 -mt-1 fa fa-sort-desc"></i>
                            </div>
                        </button>
                    } @else if (isDisabled()) {
                        <button
                            type="button"
                            [disabled]="!canOperate()"
                            mat-stroked-button
                            [matMenuTriggerFor]="operateMenu">
                            <div class="flex items-center">
                                <i class="mr-2 icon icon-enable-false primary-color"></i>Disable<i
                                    class="ml-2 -mt-1 fa fa-sort-desc"></i>
                            </div>
                        </button>
                    } @else if (isStopping()) {
                        <button type="button" [disabled]="true" mat-stroked-button [matMenuTriggerFor]="operateMenu">
                            <div class="flex items-center">
                                <i class="mr-2 fa fa-circle-o-notch fa-spin primary-color"></i>Stopping ({{
                                    status.aggregateSnapshot.activeThreadCount
                                }})
                            </div>
                        </button>
                    } @else if (isValidating()) {
                        <button type="button" [disabled]="true" mat-stroked-button [matMenuTriggerFor]="operateMenu">
                            <div class="flex items-center">
                                <i class="mr-2 fa fa-circle-o-notch fa-spin primary-color"></i>Validating
                            </div>
                        </button>
                    } @else if (isInvalid()) {
                        <button
                            type="button"
                            mat-stroked-button
                            [disabled]="!canOperate()"
                            [matMenuTriggerFor]="operateMenu">
                            <div class="flex items-center">
                                <i class="mr-2 fa fa-warning caution-color"></i>Invalid<i
                                    class="ml-2 -mt-1 fa fa-sort-desc"></i>
                            </div>
                        </button>
                    }
                    <mat-menu #operateMenu="matMenu" xPosition="before">
                        @if (isStoppable() && canOperate()) {
                            <button mat-menu-item (click)="stop()">
                                <i class="mr-2 fa fa-stop primary-color"></i>Stop
                            </button>
                        }
                        @if (isRunnable() && canOperate()) {
                            <button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="start()">
                                <i class="mr-2 fa fa-play primary-color"></i>Start
                            </button>
                        }
                        @if (isDisableable() && canOperate()) {
                            <button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="disable()">
                                <i class="mr-2 icon icon-enable-false primary-color"></i>Disable
                            </button>
                        }
                        @if (isEnableable() && canOperate()) {
                            <button mat-menu-item [disabled]="editProcessorForm.dirty" (click)="enable()">
                                <i class="mr-2 fa fa-flash primary-color"></i>Enable
                            </button>
                        }
                    </mat-menu>
                </div>
                <div>
                    @if (readonly) {
                        <button mat-flat-button mat-dialog-close>Close</button>
                    } @else {
                        <button mat-button mat-dialog-close>Cancel</button>
                        <button
                            [disabled]="
                                !editProcessorForm.dirty ||
                                editProcessorForm.invalid ||
                                saving.value ||
                                editProcessorForm.pending
                            "
                            type="button"
                            (click)="submitForm()"
                            mat-flat-button>
                            <span *nifiSpinner="saving.value">Apply</span>
                        </button>
                    }
                </div>
            </div>
        </mat-dialog-actions>
    }
</form>
